<template>
  <div class="my-container">
    <q-list padding>
      <template v-for="(node, index) in motionList" :key="index">
        <q-expansion-item
          dense
          dense-toggle
          expand-separator
        >
          <template v-slot:header>
            <q-item-section>
              <div style="font-weight: bolder">
                动效{{index+1}}
              </div>
            </q-item-section>

            <q-item-section side>
              <q-btn
                dense
                flat
                icon="mdi-trash-can-outline"
                @click="removeMotionItem(index)"
              />
            </q-item-section>
          </template>
          <table class="my-motion-table">
            <tr>
              <td class="my-label">动效类型：</td>
              <td class="my-value">
                <q-select
                  dense
                  outlined
                  options-dense
                  :options="motionTypeArr"
                  v-model="myMotionType[index]"
                  options-selected-class="teal"
                  @update:model-value="updateMotionType(index)"
                />
              </td>
            </tr>
            <tr>
              <td class="my-label">变量选择：</td>
              <td class="my-value">
                <CatalogInput
                  :catalog-arr="variableOptionList"
                  v-model="myVariable[index]"
                  @update:model-value="updateVariable(index)"
                />
              </td>
            </tr>
            <tr>
              <td class="my-label">运算符：</td>
              <td class="my-value">
                <q-select
                  dense
                  outlined
                  options-dense
                  :options="compareOperatorTypeArr"
                  v-model="myOperatorType[index]"
                  options-selected-class="teal"
                  @update:model-value="updateOperatorType(index)"
                />
              </td>
            </tr>
            <tr>
              <td class="my-label">低限值：</td>
              <td class="my-value">
                <q-input
                  dense
                  outlined
                  v-model.lazy.number="node.lowArg"
                />
              </td>
            </tr>
            <tr>
                <td class="my-label">高限值：</td>
                <td class="my-value">
                  <q-input
                    dense
                    outlined
                    v-model.lazy.number="node.highArg"
                  />
                </td>
              </tr>
            <tr>
              <td class="my-label">动效时长：</td>
              <td class="my-value">
                <q-input
                  dense
                  outlined
                  v-model.lazy.number="node.interval"
                />
              </td>
            </tr>
            <tr>
              <td class="my-label">循环次数：</td>
              <td class="my-value">
                <q-input
                  dense
                  outlined
                  v-model.lazy.number="node.cycle"
                />
              </td>
            </tr>
          </table>
        </q-expansion-item>
      </template>
    </q-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch, toRefs, PropType, defineAsyncComponent } from 'vue';
import { cataItem } from 'src/hook/common/useCatalogType';
import { EnumOperatorType } from 'src/util/SelectBoxOption';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';
import { CDataNode, CMotionNode } from 'stores/editorModels';


const CatalogInput = defineAsyncComponent(() => import('components/common/CatalogInput.vue'));

export default defineComponent({
  name: 'MotionItemInput',
  components: {
    CatalogInput
  },

  props: {
    motionTypeArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return [];
      }
    },
    compareOperatorTypeArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return [];
      }
    },
    motionList: {
      type: Array as PropType<CMotionNode[]>,
      default: () => {
        return [];
      }
    },
    variableList: {
      type: Array as PropType<CDataNode[]>,
      default: () => {
        return [];
      }
    }
  },
  emits: ['data-info'],
  setup (props, context) {
    //解构
    const {
      motionTypeArr,
      compareOperatorTypeArr,
      motionList,
      variableList
    } = toRefs(props);

    //映射关系
    const {
      findCatalogLabel
    } = useCatalogTool()

    //响应数据
    let paramList = ref<CMotionNode[]>([]);
    let myMotionType = ref<cataItem[]>([]);
    let myOperatorType = ref<cataItem[]>([]);
    let variableOptionList = ref<cataItem[]>([]);
    let myVariable = ref<cataItem[]>([]);

    //更新操作符选项
    const updateMotionType = (index: number) => {
      if (paramList.value.length > index) {
        //更新触发条件ID
        paramList.value[index].typeId = myMotionType.value[index].id;

        //发射消息给父组件
        context.emit('data-info', paramList.value);
      }
    }

    //更新变量值
    const updateVariable = (index: number) => {
      if (paramList.value.length > index) {
        //更新变量ID
        paramList.value[index].variableId = myVariable.value[index].id;

        //发射消息给父组件
        context.emit('data-info', paramList.value);
      }
    }

    //更新操作符选项
    const updateOperatorType = (index: number) => {
      if (paramList.value.length > index) {
        //更新触发条件ID
        paramList.value[index].operatorId = myOperatorType.value[index].id;

        //发射消息给父组件
        context.emit('data-info', paramList.value);
      }
    }

    //删除节点
    const removeMotionItem = (index: number) => {
      if (paramList.value.length > index) {
        //删除节点
        paramList.value.splice(index, 1);

        //发射消息给父组件
        context.emit('data-info', paramList.value);
      }
    }

    //初始化变量catalogList
    const initVariable = () => {
      variableOptionList.value.length = 0;
      variableList.value.forEach((item) => {
        variableOptionList.value.push({
          id: item.id,
          label: item.nodeValue
        });
      });
    }

    //初始化
    const init = () => {
      paramList.value.length = 0;
      myOperatorType.value.length = 0;
      myMotionType.value.length = 0;
      motionList.value.forEach((item) => {
        //动效属性
        paramList.value.push(item);

        //动效类型
        myMotionType.value.push({
          id: item.typeId,
          label: findCatalogLabel(motionTypeArr.value, item.typeId)
        });

        //比较运算符
        myOperatorType.value.push({
          id: item.operatorId,
          label: findCatalogLabel(compareOperatorTypeArr.value, item.operatorId)
        });

        //变量
        myVariable.value.push({
          id: item.variableId,
          label: findCatalogLabel(variableOptionList.value, item.typeId)
        });
      });
    }

    //监测motionList变化
    watch(() => motionList, () => {
      init();
    }, { deep: true });

    //监测variableList变化
    watch(() => variableList, () => {
      initVariable();
    }, { deep: true });

    //挂载组件
    onMounted(() => {
      initVariable();
      init();
    });


    return {
      paramList,
      motionTypeArr,
      compareOperatorTypeArr,
      myOperatorType,
      myMotionType,
      variableOptionList,
      myVariable,
      findCatalogLabel,
      updateMotionType,
      updateVariable,
      updateOperatorType,
      removeMotionItem,

      EnumOperatorType
    };
  }
});

</script>

<style lang="scss" scoped>
.my-container {
  padding: 5px;
  table, td {
    border: 0px solid #bbb6b6;
    border-collapse: collapse;
  }

  .my-motion-table {
    .my-label {
      padding: 4px;
      text-align: left;
      width: 40%;
      height: 30px;
    }
    .my-value {
      padding: 4px;
      width: 60%;
      text-align: left;
    }
  }
}

</style>
